<template>
	<view class="container" :class="{ 'call-active': isCallActive }">
		<!-- 拨号页面 -->
		<view class="dialer-page" v-if="!isCallActive">
			<view class="number-display">
				<text class="phone-number">{{ phoneNumber || '请输入电话号码' }}</text>
			</view>

			<view class="keypad">
				<view class="keypad-row" v-for="row in keypadRows" :key="row.join('')">
					<view class="keypad-key" v-for="key in row" :key="key.value" @click="appendNumber(key.value)">
						<text class="key-number">{{ key.value }}</text>
						<text class="key-letters" v-if="key.letters">{{ key.letters }}</text>
					</view>
				</view>

				<view class="keypad-row">
					<view class="keypad-key" @click="appendNumber('*')">
						<text class="key-number">*</text>
					</view>
					<view class="keypad-key" @click="appendNumber('0')">
						<text class="key-number">0</text>
						<text class="key-letters">+</text>
					</view>
					<view class="keypad-key" @click="appendNumber('#')">
						<text class="key-number">#</text>
					</view>
				</view>
			</view>

			<view class="action-buttons">
				<view class="call-button" @click="startCall">
					<text class="iconfont icon-call"></text>
				</view>
				<view class="delete-button" @click="deleteNumber" @longpress="clearNumber">
					<text class="iconfont icon-delete"></text>
				</view>
			</view>
		</view>

		<!-- 通话页面 -->
		<view class="call-page" v-if="isCallActive">
			<view class="call-info">
				<text class="call-number">{{ phoneNumber }}</text>
				<text class="call-status">{{ callStatus }}</text>
				<text class="call-timer" v-if="isConnected">{{ formattedCallTime }}</text>
			</view>

			<view class="call-actions">
				<view class="action-row">
					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-mute"></text>
						</view>
						<text class="action-text">静音</text>
					</view>

					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-keypad"></text>
						</view>
						<text class="action-text">拨号键盘</text>
					</view>

					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-speaker"></text>
						</view>
						<text class="action-text">扬声器</text>
					</view>
				</view>

				<view class="action-row">
					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-add"></text>
						</view>
						<text class="action-text">添加通话</text>
					</view>

					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-hold"></text>
						</view>
						<text class="action-text">保持</text>
					</view>

					<view class="action-button">
						<view class="action-icon">
							<text class="iconfont icon-contacts"></text>
						</view>
						<text class="action-text">联系人</text>
					</view>
				</view>
			</view>

			<view class="hang-up-button" @click="endCall">
				<text class="iconfont icon-hangup"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onUnmounted
	} from 'vue';

	// 电话号码和通话状态
	const phoneNumber = ref('');
	const isCallActive = ref(false);
	const isConnected = ref(false);
	const callStatus = ref('正在拨号...');
	const callDuration = ref(0);
	const callTimer = ref(null);

	// 拨号键盘数据
	const keypadRows = [
		[{
				value: '1',
				letters: ''
			},
			{
				value: '2',
				letters: 'ABC'
			},
			{
				value: '3',
				letters: 'DEF'
			}
		],
		[{
				value: '4',
				letters: 'GHI'
			},
			{
				value: '5',
				letters: 'JKL'
			},
			{
				value: '6',
				letters: 'MNO'
			}
		],
		[{
				value: '7',
				letters: 'PQRS'
			},
			{
				value: '8',
				letters: 'TUV'
			},
			{
				value: '9',
				letters: 'WXYZ'
			}
		]
	];

	// 格式化通话时间
	const formattedCallTime = computed(() => {
		const minutes = Math.floor(callDuration.value / 60);
		const seconds = callDuration.value % 60;
		return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
	});

	// 添加数字到电话号码
	const appendNumber = (num) => {
		if (phoneNumber.value.length < 20) {
			phoneNumber.value += num;
			// 添加数字时的触感反馈
			uni.vibrateShort({
				success: function() {
					console.log('按键震动');
				}
			});
		}
	};

	// 删除最后一个数字
	const deleteNumber = () => {
		if (phoneNumber.value.length > 0) {
			phoneNumber.value = phoneNumber.value.slice(0, -1);
		}
	};

	// 清空电话号码
	const clearNumber = () => {
		phoneNumber.value = '';
		uni.showToast({
			title: '已清空',
			icon: 'none'
		});
	};

	// 开始通话
	const startCall = () => {
		if (phoneNumber.value.length > 0) {
			isCallActive.value = true;
			callStatus.value = '正在拨号...';

			// 播放拨号音效
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.src = '/static/audio/dial.mp3';
			innerAudioContext.play();

			// 5秒后接通电话
			setTimeout(() => {
				isConnected.value = true;
				callStatus.value = '通话中';

				// 开始计时
				callTimer.value = setInterval(() => {
					callDuration.value++;
				}, 1000);

				// 播放接通提示音
				innerAudioContext.src = '/static/audio/connected.mp3';
				innerAudioContext.play();
			}, 5000);
		} else {
			uni.showToast({
				title: '请输入电话号码',
				icon: 'none'
			});
		}
	};

	// 结束通话
	const endCall = () => {
		isCallActive.value = false;
		isConnected.value = false;
		callStatus.value = '正在拨号...';
		callDuration.value = 0;

		if (callTimer.value) {
			clearInterval(callTimer.value);
			callTimer.value = null;
		}

		// 播放挂断音效
		const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.src = '/static/audio/hangup.mp3';
		innerAudioContext.play();

		uni.showToast({
			title: '通话已结束',
			icon: 'none'
		});
	};

	// 组件卸载时清除计时器
	onUnmounted(() => {
		if (callTimer.value) {
			clearInterval(callTimer.value);
		}
	});
</script>

<style lang="scss">
	.container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #4b6cb7, #182848);
		transition: background 0.5s ease;
	}

	.container.call-active {
		background: linear-gradient(135deg, #134e5e, #71b280);
	}

	/* 拨号页面样式 */
	.dialer-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 40rpx;
	}

	.number-display {
		margin-top: 80rpx;
		margin-bottom: 60rpx;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		text-align: center;
	}

	.phone-number {
		font-size: 56rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.keypad {
		margin-bottom: 60rpx;
	}

	.keypad-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.keypad-key {
		width: 160rpx;
		height: 160rpx;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: background-color 0.2s;
	}

	.keypad-key:active {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.key-number {
		font-size: 60rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.key-letters {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		margin-top: 6rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: auto;
		margin-bottom: 60rpx;
	}

	.call-button {
		width: 160rpx;
		height: 160rpx;
		background-color: #4CAF50;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 40rpx;
	}

	.delete-button {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 通话页面样式 */
	.call-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
	}

	.call-info {
		margin-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.call-number {
		font-size: 60rpx;
		color: #ffffff;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.call-status {
		font-size: 36rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 10rpx;
	}

	.call-timer {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.7);
	}

	.call-actions {
		margin-top: 160rpx;
		width: 100%;
	}

	.action-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 80rpx;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.action-text {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.hang-up-button {
		width: 160rpx;
		height: 160rpx;
		background-color: #F44336;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: auto;
		margin-bottom: 60rpx;
	}

	/* 图标样式 */
	.iconfont {
		font-family: "iconfont";
		font-size: 60rpx;
		color: #ffffff;
	}

	.icon-call:before {
		content: "\e622";
	}

	.icon-delete:before {
		content: "\e623";
	}

	.icon-hangup:before {
		content: "\e624";
	}

	.icon-mute:before {
		content: "\e625";
	}

	.icon-keypad:before {
		content: "\e626";
	}

	.icon-speaker:before {
		content: "\e627";
	}

	.icon-add:before {
		content: "\e628";
	}

	.icon-hold:before {
		content: "\e629";
	}

	.icon-contacts:before {
		content: "\e62a";
	}
</style>